<template>
  <div>
    <el-container>
      <el-header>
        <hand-menu></hand-menu>
      </el-header>
      <el-main>
        <el-carousel :interval="4000" type="card" height="450px">
          <el-carousel-item v-for="(items, index) in srcfour" :key="index">
            <img :src="items.src" width="850px" height="450px" />
          </el-carousel-item>
        </el-carousel>
      </el-main>
      
    </el-container>
    <el-row> 
  <el-image 
    style="width: 370px; height: 370px"
    :src="a" 
    :preview-src-list="srcList">
  </el-image>
  <el-image 
    style="width: 370px; height: 370px"
    :src="c" 
    :preview-src-list="srcList2">
  </el-image>
  <el-image 
     style="width: 370px; height: 370px"
    :src="b" 
    :preview-src-list="srcList1">
  </el-image>
   <el-image 
    style="width: 370px; height: 370px"
    :src="d" 
    :preview-src-list="srcList3">
  </el-image>
  <!-- <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col> -->
</el-row>
<div>
  <span class="hangzhou">杭州</span>
  <span class="xianggang">香港</span>
  <span class="xian">西安</span>
  <span class="chongqing">重庆</span>
</div>
<el-image :src="e"
style="width: 1520px; height: 100px"></el-image>
<el-row>
  <el-col :span="24"><div class="aaa">
    新橙旅游社竭诚为您服务
    </div></el-col>
</el-row>
<el-row>
  <el-col :span="12"><div class="grid-content bg-purple">
    个性私人定制
    </div></el-col>
  <el-col :span="12"><div class="grid-content bg-purple-light">
    终身售后服务
    </div></el-col>
</el-row>
<el-row>
  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
<el-row>
  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
<div>
  <el-image :src="g" style="width: 370px; height: 550px"></el-image>
  <el-image :src="f" style="width: 1140px; height: 550px"></el-image>
  <!-- <el-image :src="g"></el-image> -->
</div>
  </div>
</template>

<script>
import HandMenu from './HandMenu.vue';
import MainMenu from "./MainMenu.vue";
import Visit from "./Visit.vue";
export default {
  data() {
    return {
      dialogFormVisible:{
        show:false
      },
      a:require("../assets/images/hangzhou.jpg"),
      b:require("../assets/images/xian.jpg"),
      c:require("../assets/images/xianggang.jpg"),
      d:require("../assets/images/chong.jpg"),
      e:require("../assets/images/jie1.jpg"),
      f:require("../assets/images/jie2.jpg"),
      g:require("../assets/images/jie4.jpg"),
        srcList: [
          require("../assets/images/hang1.jpg"),
          require("../assets/images/hang2.jpg"),
          require("../assets/images/hang3.jpg")
        ],
        srcList1: [
          require("../assets/images/xian1.jpg"),
          require("../assets/images/xian2.jpg"),
          require("../assets/images/xian3.jpg")
        ],
        srcList2: [
          require("../assets/images/xiang1.jpg"),
          require("../assets/images/xiang2.jpg"),
          require("../assets/images/xiang3.jpg")
        ],
        srcList3: [
          require("../assets/images/chong1.jpg"),
          require("../assets/images/chong2.jpg"),
        ],
      srcfour: [
        { src: require("../assets/images/gg1.heic") },
        { src: require("../assets/images/gg2.heic") },
        { src: require("../assets/images/gg3.heic") },
        { src: require("../assets/images/gg4.heic") },
        { src: require("../assets/images/gg5.heic") },
        { src: require("../assets/images/gg6.heic") },
      ],
      circleUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      sizeList: ["small"],
      user:"",
      staff:"",
      userId:""
    };
    MainMenu;
  },
  components:{Visit, HandMenu},
  methods: {
    logout(){
      sessionStorage.clear();
      this.$router.push("/");
    },
    openVisitDialog(){
      this.dialogFormVisible.show = true;
    },
    goBackgroundCenter() {
      //this.user = JSON.parse(sessionStorage.getItem("user"));
      
      //this.staff = JSON.parse(sessionStorage.getItem("staff"));
      if(JSON.parse(sessionStorage.getItem("user")) != null){
        this.user = JSON.parse(sessionStorage.getItem("user"));
        this.userId=this.user.userId;
        this.$router.push("/user");
        sessionStorage.setItem("userId", JSON.stringify(this.userId));
        // sessionStorage.clear();       
        this.user = "";
      } else if(JSON.parse(sessionStorage.getItem("staff")) != null){
        this.$router.push("/BackgroundCenter");
        this.staff = "";
      }
    },
    
  },
  created(){
   
  }
};
</script>
<style>

.aaa{
   font-size: 20px;
  color: black;
  text-align: center;
}
.el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
.hangzhou{
  font-size: 25px;
  color: #808080;
  margin-left: 100px;
}
.xianggang{
  font-size: 25px;
  color: #808080;
  margin-left: 400px;
}
.xian{
 font-size: 25px;
  color: #808080;
  margin-left: 300px;
}
.chongqing{
 font-size: 25px;
  color: #808080;
  margin-left: 330px;
}
.chanpin{
  font-size: 30px;
  text-align: center;
  color: #333;
  font-family: 'Courier New', Courier, monospace;
}
.el-header,
.el-footer {
  background-color: #ffa07a;
  color: #333; 
  text-align: center;
  line-height: 60px;
}
.el{
  font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
  line-height: 60px;
  width: 60px;
}


.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-menu-demo {
  margin-left: 1300px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 500px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
  margin-top: 260px;
}


.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>